<template>
  <view class="coupon-page" :style="themeColorStyles">


    <!-- 内容区域 -->
    <view class="content-container">
      <view class="stats-card" :style="{boxShadow: themeColorStyles.cardShadow, border: themeColorStyles.cardBorder}">
        <view class="stats-header">
          <text class="stats-title">优惠券统计</text>
        </view>

        <view class="stats-grid">
          <view class="stats-item" :style="{border: themeColorStyles.cardBorder}">
            <text class="stats-number" :style="{color: themeColorStyles.primaryColor}">{{ totalCoupons }}</text>
            <text class="stats-label">总数量</text>
          </view>
          <view class="stats-item" :style="{border: themeColorStyles.cardBorder}">
            <text class="stats-number" :style="{color: themeColorStyles.primaryColor}">{{ availableCoupons }}</text>
            <text class="stats-label">可用</text>
          </view>
          <view class="stats-item" :style="{border: themeColorStyles.cardBorder}">
            <text class="stats-number" :style="{color: themeColorStyles.primaryColor}">{{ usedCoupons }}</text>
            <text class="stats-label">已使用</text>
          </view>
        </view>
      </view>

      <view class="coupon-list">
        <view class="coupon-card" v-for="coupon in sortedCouponList" :key="coupon.userCouponId"
          :class="{ 'expired': coupon.useStatus === '2' || coupon.use_status === '2', 'used': coupon.useStatus === '1' || coupon.use_status === '1' }">
          <view class="coupon-left">
            <text class="coupon-amount" :style="{color: themeColorStyles.primaryColor}">{{ coupon.couponType === '2' ? (coupon.discountRate ? (coupon.discountRate * 10) + '折' : '9折') : ('¥' + (coupon.couponAmount || '0')) }}</text>
            <text class="coupon-condition">满{{ coupon.minAmount || 0 }}可用</text>
          </view>
          <view class="coupon-right">
            <text class="coupon-name">{{ coupon.couponName }}</text>
            <text class="coupon-desc">{{ coupon.couponType === '1' ? '满减券' : coupon.couponType === '2' ? '折扣券' : '无门槛券'
              }}</text>
            <text class="coupon-time">有效期至：{{ coupon.expireTime ? coupon.expireTime.split(' ')[0] : '永久有效' }}</text>
            <view class="coupon-status">
              <view class="status-row">
                <text :class="(coupon.useStatus || coupon.use_status) === '0' ? 'status-available' : (coupon.useStatus || coupon.use_status) === '1' ? 'status-used' : 'status-expired'">{{ getStatusText(coupon.useStatus || coupon.use_status) }}</text>
                <!-- 线下核销按钮 -->
                <button v-if="(coupon.useStatus || coupon.use_status) === '0'" 
                        class="offline-verify-btn" 
                        @click="showOfflineVerifyModal(coupon)"
                        :style="{backgroundColor: themeColorStyles.primaryColor}">
                  线下核销
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="empty-container" v-if="couponList.length === 0" :style="{border: themeColorStyles.cardBorder}">
        <view class="empty-content">
          <text class="empty-icon">🎫</text>
          <text class="empty-text">暂无优惠券</text>
          <text class="empty-desc">快去领取优惠券吧~</text>
        </view>
      </view>

      <!-- 底部间距 -->
      <view class="bottom-space"></view>
    </view>

    <!-- 线下核销二维码弹窗 -->
    <view class="qr-modal" v-if="showQrModal" @click="hideQrModal">
      <view class="qr-modal-content" @click.stop>
        <view class="qr-modal-header">
          <text class="qr-modal-title">线下核销</text>
          <text class="qr-modal-close" @click="hideQrModal">×</text>
        </view>
        <view class="qr-modal-body">
          <view class="coupon-info">
            <text class="coupon-info-name">{{ selectedCoupon && selectedCoupon.couponName }}</text>
            <text class="coupon-info-desc">{{ getCouponTypeText(selectedCoupon && selectedCoupon.couponType) }}</text>
            <text class="coupon-info-amount">{{ getCouponAmountText(selectedCoupon) }}</text>
          </view>
          <view class="qr-code-container">
            <view class="code-section">
              <text class="code-section-title">二维码</text>
              <canvas canvas-id="qrCanvas" class="qr-canvas"></canvas>
            </view>
            <!-- 暂时隐藏条形码功能 -->
            <!-- <view class="code-section">
              <text class="code-section-title">条形码</text>
              <canvas canvas-id="barcodeCanvas" class="barcode-canvas"></canvas>
            </view> -->
            <text class="qr-tip">请向商家出示此码进行核销</text>
          </view>
          <view class="coupon-code-info">
            <text class="coupon-code-label">优惠券码：</text>
            <text class="coupon-code-value">{{ getCouponCodeText(selectedCoupon) }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getUserCouponList } from '@/api/coupon'
import { getThemePrimaryColor, getThemeColorFromGlobal } from '@/utils/theme'
import uQRCode from '@/utils/uqrcode.js'

export default {
  data() {
    return {
      // 优惠券列表数据
      couponList: [],
      loading: false,
      // 主题色
      primaryColor: '#4A90E2',
      // 二维码弹窗相关
      showQrModal: false,
      selectedCoupon: null
    }
  },

  onLoad() {
    this.initThemeColor();
    this.loadCouponList();
  },

  computed: {
    // 总优惠券数量
    totalCoupons() {
      return this.couponList.length;
    },

    // 可用优惠券数量
    availableCoupons() {
      return this.couponList.filter(item => (item.useStatus || item.use_status) === '0').length;
    },

    // 已使用优惠券数量
    usedCoupons() {
      return this.couponList.filter(item => (item.useStatus || item.use_status) === '1').length;
    },

    // 排序后的优惠券列表
    sortedCouponList() {
      return [...this.couponList].sort((a, b) => {
        // 首先按状态排序：未使用(0)在前，已使用(1)和过期(2)在后
        const statusPriority = {
          '0': 0, // 未使用
          '1': 1, // 已使用
          '2': 1  // 已过期
        };

        if (statusPriority[a.useStatus || a.use_status] !== statusPriority[b.useStatus || b.use_status]) {
          return statusPriority[a.useStatus || a.use_status] - statusPriority[b.useStatus || b.use_status];
        }

        // 状态相同时，按优惠金额降序排列（金额大的在前）
        return (b.couponAmount || 0) - (a.couponAmount || 0);
      });
    },

    // 主题色样式
    themeColorStyles() {
      return this.setThemeColorVariables(this.primaryColor)
    }
  },

  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 加载优惠券列表
    async loadCouponList() {
      try {
        this.loading = true;
        console.log('开始获取优惠券列表...');
        const response = await getUserCouponList();
        console.log('优惠券API响应:', response);
        
        if (response.code === 200) {
          console.log('优惠券数据:', response.rows);
          console.log('优惠券数量:', response.rows ? response.rows.length : 0);
          
          this.couponList = response.rows.map(coupon => {
            console.log('处理优惠券:', coupon);
            // 检查是否过期
            const now = new Date();
            const expireDate = new Date(coupon.expireTime);
            const currentStatus = coupon.useStatus || coupon.use_status;
            if (currentStatus === '0' && expireDate < now) {
              if (coupon.useStatus !== undefined) {
                coupon.useStatus = '2'; // 设置为过期状态
              } else {
                coupon.use_status = '2'; // 设置为过期状态
              }
            }
            return coupon;
          });
          
          console.log('处理后的优惠券列表:', this.couponList);
        } else {
          console.log('获取优惠券失败:', response.msg);
          uni.showToast({
            title: response.msg || '获取优惠券失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取优惠券列表失败:', error);
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },

    // 获取优惠券状态文本
    getStatusText(useStatus) {
      switch (useStatus) {
        case '0': return '可使用';
        case '1': return '已使用';
        case '2': return '已过期';
        default: return '未知状态';
      }
    },

    // 获取优惠券状态样式类
    getStatusClass(useStatus) {
      switch (useStatus) {
        case '0': return 'status-available';
        case '1': return 'status-used';
        case '2': return 'status-expired';
        default: return 'status-used';
      }
    },

    // 初始化主题色
    async initThemeColor() {
      try {
        // 获取主题色配置
        const themeColor = await getThemeColorFromGlobal()
        
        // 判断是否为异步主题色（数字字符串表示需要从服务器获取）
        if (/^\d+$/.test(themeColor)) {
          // 异步获取主题色
          const primaryColor = await getThemePrimaryColor(themeColor)
          this.primaryColor = primaryColor
          console.log('异步获取主题色 - 优惠券页面:', themeColor, '主色调:', primaryColor)
        } else {
          // 同步获取主题色（直接使用颜色值）
          this.primaryColor = getThemePrimaryColor(themeColor)
          console.log('同步获取主题色 - 优惠券页面:', themeColor, '主色调:', this.primaryColor)
        }
      } catch (error) {
        console.error('优惠券页面主题色初始化失败:', error)
        // 使用默认主题色
        this.primaryColor = '#4A90E2'
      }
    },

    // 设置主题色变量
    setThemeColorVariables(color) {
      const rgb = this.hexToRgb(color)
      return {
        primaryColor: color,
        primaryColorLight: this.lightenColor(color, 20),
        primaryColorShadow: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.3)`,
        primaryColorBorder: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
        primaryColorBgLight: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
        cardShadow: `0 8rpx 32rpx rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.08)`,
        cardBorder: `1rpx solid rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
        statusAvailableBorder: `1rpx solid ${color}`,
        statusAvailableBg: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
        '--primary-color': color,
        '--card-bg-color': '#FFFFFF',
        '--card-border-color': `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.2)`,
        '--page-bg-color': '#F8FAFC',
        '--stats-bg-color': '#F8FAFC',
        '--text-secondary-color': '#64748B',
        '--status-available-bg': `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
        '--status-disabled-bg': '#F8FAFC'
      }
    },

    // 颜色转RGB
    hexToRgb(hex) {
      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : null
    },

    // 颜色变亮
    lightenColor(color, percent) {
      const rgb = this.hexToRgb(color)
      if (!rgb) return color
      
      const r = Math.min(255, Math.floor(rgb.r + (255 - rgb.r) * percent / 100))
      const g = Math.min(255, Math.floor(rgb.g + (255 - rgb.g) * percent / 100))
      const b = Math.min(255, Math.floor(rgb.b + (255 - rgb.b) * percent / 100))
      
      return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
    },

    // 显示线下核销弹窗
    showOfflineVerifyModal(coupon) {
      this.selectedCoupon = coupon;
      this.showQrModal = true;
      this.$nextTick(() => {
        this.generateQRCode(coupon);
        // 暂时注释掉条形码生成
        // this.generateBarcode(coupon);
      });
    },

    // 隐藏二维码弹窗
    hideQrModal() {
      this.showQrModal = false;
      this.selectedCoupon = null;
    },

    // 生成二维码
    generateQRCode(coupon) {
      try {
        const couponCode = coupon.couponCode || `CPN${coupon.userCouponId}`;
        const couponId = coupon.userCouponId || coupon.couponId;
        const qrText = `${couponCode}_${couponId}`;
        
        // 使用uQRCode库生成真正的二维码
        this.drawRealQRCode(qrText);
      } catch (error) {
        console.error('生成二维码失败:', error);
        // 备用方案：显示优惠券码
        const ctx = uni.createCanvasContext('qrCanvas', this);
        this.drawQRCodeText(ctx, coupon.couponCode || `CPN${coupon.userCouponId}`);
      }
    },

    // 使用uQRCode库绘制真正的二维码
    drawRealQRCode(text) {
      try {
        // 获取canvas上下文
        const ctx = uni.createCanvasContext('qrCanvas', this);
        
        // 清空画布
        ctx.clearRect(0, 0, 250, 250);
        
        // 使用uQRCode库生成二维码
        uQRCode.make({
          canvasId: 'qrCanvas',
          componentInstance: this,
          text: text,
          size: 230,
          margin: 10,
          backgroundColor: '#ffffff',
          foregroundColor: '#000000',
          errorCorrectLevel: uQRCode.defaults.errorCorrectLevel,
          success: (res) => {
            console.log('二维码生成成功:', text);
          },
          fail: (error) => {
            console.error('uQRCode生成失败:', error);
            // 备用方案
            this.drawFallbackQRCode(text);
          }
        }).catch(error => {
          console.error('uQRCode生成失败:', error);
          // 备用方案
          this.drawFallbackQRCode(text);
        });
        
      } catch (error) {
        console.error('uQRCode生成失败:', error);
        // 备用方案
        this.drawFallbackQRCode(text);
      }
    },

    // 备用二维码生成方案
    drawFallbackQRCode(text) {
      const ctx = uni.createCanvasContext('qrCanvas', this);
      const canvasSize = 250;
      
      // 清空画布
      ctx.clearRect(0, 0, canvasSize, canvasSize);
      ctx.setFillStyle('#FFFFFF');
      ctx.fillRect(0, 0, canvasSize, canvasSize);
      
      // 绘制文本提示
      ctx.setFillStyle('#000000');
      ctx.setFontSize(16);
      ctx.setTextAlign('center');
      ctx.fillText('二维码生成失败', canvasSize / 2, canvasSize / 2 - 20);
      ctx.fillText(text, canvasSize / 2, canvasSize / 2 + 20);
      ctx.draw();
    },

    // 生成条形码
    getCouponList() {
      this.loading = true;
      
      listCoupon(this.queryParams).then(response => {
        this.loading = false;
        if (response.rows) {
          this.couponList = response.rows.map(coupon => {
            // 格式化日期
            if (coupon.validStartTime) {
              coupon.validStartTime = coupon.validStartTime.split(' ')[0];
            }
            if (coupon.validEndTime) {
              coupon.validEndTime = coupon.validEndTime.split(' ')[0];
            }
            
            // 计算折扣显示
            if (coupon.type === '1') { // 折扣券
              coupon.discountDisplay = (coupon.discount / 10) + '折';
            } else { // 满减券
              coupon.discountDisplay = '¥' + coupon.discountAmount;
            }
            
            return coupon;
          });
        } else {
          this.couponList = [];
        }
      }).catch(error => {
        this.loading = false;
        console.error('获取优惠券失败:', error);
        this.$modal.msgError('获取优惠券失败');
      });
    },

    // 绘制条形码 - 基于 uni-app 最佳实践
    drawBarcode(text) {
      console.log('开始绘制条形码:', text);
      
      // 使用 uni.createCanvasContext 的新版本 API
      const ctx = uni.createCanvasContext('barcodeCanvas', this);
      const canvasWidth = 400;
      const canvasHeight = 100;
      
      // 清空画布并设置背景
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
      ctx.setFillStyle('#FFFFFF');
      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
      
      // 条形码参数 - 参考 lime-barcode 插件的实现
      const barWidth = 1.5;
      const barSpacing = 0.8;
      const barcodeWidth = canvasWidth - 30; // 留出边距
      const barcodeHeight = 50;
      const startX = 15;
      const startY = 15;
      
      // 生成条形码数据 - 使用 Code128 类似的编码方式
      const barcodeData = this.generateBarcodeData(text);
      const totalWidth = barcodeData.length * (barWidth + barSpacing);
      const actualStartX = (canvasWidth - totalWidth) / 2;
      
      ctx.setFillStyle('#000000');
      
      // 绘制条形码
      for (let i = 0; i < barcodeData.length; i++) {
        if (barcodeData[i] === 1) {
          const x = actualStartX + i * (barWidth + barSpacing);
          ctx.fillRect(x, startY, barWidth, barcodeHeight);
        }
      }
      
      // 绘制文本
      ctx.setFillStyle('#000000');
      ctx.setFontSize(12);
      ctx.setTextAlign('center');
      const displayText = text.length > 18 ? text.substring(0, 18) + '...' : text;
      ctx.fillText(displayText, canvasWidth / 2, canvasHeight - 12);
      
      // 执行绘制
      ctx.draw(true, () => {
        console.log('条形码绘制完成:', text);
      });
    },

    // 生成条形码数据 - 简化版 Code128 编码
    generateBarcodeData(text) {
      const data = [];
      
      // 起始码
      data.push(...[1,1,0,1,0,0,1,1,0,1,1]);
      
      // 数据编码
      for (let i = 0; i < text.length; i++) {
        const char = text.charAt(i);
        const charCode = char.charCodeAt(0);
        
        // 简化的字符编码模式
        const pattern = this.getCharPattern(charCode);
        data.push(...pattern);
      }
      
      // 结束码
      data.push(...[1,1,0,0,1,1,1,0,1,0,0]);
      
      return data;
    },

    // 获取字符对应的条形码模式
    getCharPattern(charCode) {
      // 简化的字符模式映射
      const patterns = [
        [1,1,0,0,1,0,1], // 0
        [1,0,1,1,0,0,1], // 1
        [1,0,0,1,1,0,1], // 2
        [1,0,0,0,1,1,1], // 3
        [0,1,1,0,0,1,1], // 4
        [0,1,0,0,1,1,1], // 5
        [0,0,1,1,0,1,1], // 6
        [0,1,1,1,0,0,1], // 7
        [0,0,1,0,1,1,1], // 8
        [1,1,1,0,0,0,1]  // 9
      ];
      
      const index = charCode % patterns.length;
      return patterns[index];
    },

    // 备用条形码生成方案
    drawFallbackBarcode(text) {
      console.log('使用备用条形码方案:', text);
      const ctx = uni.createCanvasContext('barcodeCanvas', this);
      const canvasWidth = 400;
      const canvasHeight = 100;
      
      // 清空画布
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
      
      // 设置背景
      ctx.setFillStyle('#F5F5F5');
      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
      
      // 绘制边框
      ctx.setStrokeStyle('#CCCCCC');
      ctx.setLineWidth(2);
      ctx.strokeRect(1, 1, canvasWidth - 2, canvasHeight - 2);
      
      // 绘制文本提示
      ctx.setFillStyle('#666666');
      ctx.setFontSize(14);
      ctx.setTextAlign('center');
      ctx.fillText('条形码', canvasWidth / 2, canvasHeight / 2 - 10);
      
      ctx.setFillStyle('#333333');
      ctx.setFontSize(12);
      ctx.fillText(text.substring(0, 18), canvasWidth / 2, canvasHeight / 2 + 8);
      
      // 执行绘制
      ctx.draw(true, () => {
        console.log('备用条形码绘制完成');
      });
    },
    drawQRCodeText(ctx, text) {
      ctx.setFillStyle('#000000');
      ctx.setFontSize(16);
      ctx.fillText(text, 10, 100);
      ctx.draw();
    },

    // 获取优惠券类型文本
    getCouponTypeText(couponType) {
      switch (couponType) {
        case '1': return '满减券';
        case '2': return '折扣券';
        case '3': return '无门槛券';
        default: return '优惠券';
      }
    },

    // 获取优惠券金额文本
    getCouponAmountText(coupon) {
      if (!coupon) return '';
      if (coupon.couponType === '2') {
        return coupon.discountRate ? (coupon.discountRate * 10) + '折' : '9折';
      } else {
        return '¥' + (coupon.couponAmount || '0');
      }
    },

    // 获取优惠券码文本
    getCouponCodeText(coupon) {
      if (!coupon) return '';
      const couponCode = coupon.couponCode || `CPN${coupon.userCouponId}`;
      const couponId = coupon.userCouponId || coupon.couponId;
      return `${couponCode}_${couponId}`;
    }
  }
};
</script>

<style scoped>
/* 页面整体样式 */
.coupon-page {
  min-height: 100vh;
  background: var(--page-bg-color, #F8FAFC);
  display: flex;
  flex-direction: column;
}



/* 内容区域 */
.content-container {
  flex: 1;
  padding: 24rpx;
}

/* 统计卡片样式 */
.stats-card {
  background: var(--card-bg-color, #FFFFFF);
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  padding: 32rpx;
  border: 1rpx solid var(--card-border-color, #E2E8F0);
}

.stats-header {
  margin-bottom: 32rpx;
}

.stats-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1E293B;
}

/* 统计网格样式 */
.stats-grid {
  display: flex;
  justify-content: space-between;
  gap: 16rpx;
}

.stats-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx;
  background: var(--stats-bg-color, #F8FAFC);
  border-radius: 12rpx;
  border: 1rpx solid var(--card-border-color, #E2E8F0);
}

.stats-number {
  font-size: 36rpx;
  font-weight: 600;
  color: #3B82F6;
  margin-bottom: 8rpx;
}

.stats-label {
  font-size: 24rpx;
  color: #64748B;
}

/* 优惠券列表样式 */
.coupon-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.coupon-card {
  background: var(--card-bg-color, #FFFFFF);
  border-radius: 16rpx;
  padding: 24rpx;
  border: 1rpx solid var(--card-border-color, #E2E8F0);
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.coupon-card:active {
  transform: scale(0.98);
}

.coupon-card.expired,
.coupon-card.used {
  opacity: 0.6;
  background: #F8FAFC;
}

.coupon-left {
  width: 160rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #E2E8F0;
  margin-right: 24rpx;
  padding-right: 24rpx;
}

.coupon-amount {
  font-size: 36rpx;
  font-weight: 600;
  color: var(--primary-color, #3B82F6);
  margin-bottom: 8rpx;
}

.coupon-condition {
  font-size: 20rpx;
  color: var(--text-secondary-color, #64748B);
}

.coupon-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.coupon-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 8rpx;
}

.coupon-desc {
  font-size: 24rpx;
  color: var(--text-secondary-color, #64748B);
  margin-bottom: 8rpx;
}

.coupon-time {
  font-size: 20rpx;
  color: var(--text-secondary-color, #64748B);
  margin-bottom: 12rpx;
}

.coupon-status {
  align-self: flex-end;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.status-available {
  font-size: 20rpx;
  color: var(--primary-color, #3B82F6);
  background: var(--status-available-bg, #F8FAFC);
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  border: 1rpx solid var(--primary-color, #3B82F6);
}

.status-used {
  font-size: 20rpx;
  color: var(--text-secondary-color, #64748B);
  background: var(--status-disabled-bg, #F8FAFC);
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  border: 1rpx solid var(--card-border-color, #E2E8F0);
}

.status-expired {
  font-size: 20rpx;
  color: var(--text-secondary-color, #64748B);
  background: var(--status-disabled-bg, #F8FAFC);
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  border: 1rpx solid var(--card-border-color, #E2E8F0);
}

/* 空状态样式 */
.empty-container {
  background: var(--card-bg-color, #FFFFFF);
  border-radius: 16rpx;
  border: 1rpx solid var(--card-border-color, #E2E8F0);
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 24rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #1E293B;
  margin-bottom: 8rpx;
  font-weight: 500;
}

.empty-desc {
  font-size: 24rpx;
  color: #64748B;
}

/* 底部间距 */
.bottom-space {
  height: 60rpx;
}

/* 线下核销按钮样式 */
.offline-verify-btn {
  padding: 6rpx 12rpx;
  background-color: var(--primary-color, #3B82F6);
  color: white;
  border: none;
  border-radius: 6rpx;
  font-size: 18rpx;
  font-weight: 500;
  min-width: 60rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.offline-verify-btn:active {
  opacity: 0.8;
}

/* 二维码弹窗样式 */
.qr-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.qr-modal-content {
  background: white;
  border-radius: 24rpx;
  width: 700rpx;
  max-width: 90vw;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
}

.qr-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 40rpx;
  border-bottom: 1rpx solid #E2E8F0;
}

.qr-modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1E293B;
}

.qr-modal-close {
  font-size: 48rpx;
  color: #64748B;
  cursor: pointer;
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-modal-body {
  padding: 40rpx;
}

.coupon-info {
  text-align: center;
  margin-bottom: 40rpx;
  padding-bottom: 32rpx;
  border-bottom: 1rpx solid #E2E8F0;
}

.coupon-info-name {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 12rpx;
}

.coupon-info-desc {
  display: block;
  font-size: 24rpx;
  color: #64748B;
  margin-bottom: 8rpx;
}

.coupon-info-amount {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: var(--primary-color, #3B82F6);
}

.qr-code-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.code-section {
  margin-bottom: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.code-section-title {
  font-size: 24rpx;
  color: #64748B;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.qr-canvas {
  width: 400rpx;
  height: 400rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 16rpx;
  background: white;
  display: block;
}

.barcode-canvas {
  width: 600rpx;
  height: 150rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  background-color: #ffffff;
  margin: 0 auto;
  display: block;
}

.qr-tip {
  display: block;
  font-size: 24rpx;
  color: #64748B;
  text-align: center;
}

.coupon-code-info {
  background: #F8FAFC;
  border-radius: 8rpx;
  padding: 24rpx;
  margin-top: 24rpx;
}

.coupon-code-label {
  font-size: 28rpx;
  color: #64748B;
  margin-right: 16rpx;
}

.coupon-code-value {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
  font-family: 'Courier New', monospace;
}
</style>
